<template>
	<div class="recommend">
		<div class="recommend-title">
			<img class="title-img" src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png"/>
			<span class="title">本周热销榜单</span>
		</div>
		<ul  class="recommend-content">
			<li class="recommend-content-item" v-for="item of recommendList" :key="item.id">
				<div  class="recommend-content-div">
					<img class="content-img" :src="item.imgUrl"/>
				</div>
				<div class="recommend-content-desc">{{item.title}}</div>
				<div class="recommend-content-price"><span class="content-price">￥{{item.price}}</span> <span>起</span></div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'HomeRecommend',
		props:{
			recommendList:Array
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../../assets/styles/minxins.styl'
	.recommend
		margin-top:0.3rem
		background:#fff
		.recommend-title
			padding:0.24rem				
			.title-img
				width:0.3rem
				height:0.35rem
				display:inline-block
				overflow:hidden
				vertical-align:top
			.title
				font-size:0.4rem
		.recommend-content
			padding: 0 .24rem
			overflow-x: scroll
			white-space: nowrap		    
			.recommend-content-item
				position:relative
				display:inline-block
				padding:.06rem 0 .2rem;
				width:2.2rem			
				.recommend-content-div
					overflow: hidden
					width: 2.2rem
					height: 0
					padding-bottom: 100%
					.content-img
						width:100%
				.recommend-content-desc
					width:2.2rem
					ellipsis()
					margin-top:0.2rem
					text-align:center
				.recommend-content-price
					width:2.2rem
					text-align:center
					margin-top:0.2rem
					.content-price
						color:#ff8300
			.recommend-content-item:not(:first-child)
				margin-left:0.24rem
					
			    		
</style>